<template>
  <a-modal
    title="手机号码修改"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
    :okText="current == 0 ? '下一步' : '完成'"
    cancelText="取消"
  >
    <div style="width: 60%; margin: 0px auto 40px">
      <a-steps :current="current">
        <a-step title="验证旧手机号" />
        <a-step title="绑定新手机" />
      </a-steps>
    </div>
    <a-spin :spinning="loading">
      <div v-if="current == 0">
        <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }">
          <a-form-item label="旧手机号码">
            <a-input disabled v-decorator="['phone', { rules: [{ required: true, message: '旧手机号码不能为空' }] }]" />
          </a-form-item>
          <a-form-item label="验证码">
            <a-input v-decorator="['phoneCode', { rules: [{ required: true, message: '验证码不能为空' }] }]">
              <a-spin
                v-if="msg.time === 0"
                slot="addonAfter"
                :spinning="msg.loading"
                class="cursor"
                @click="handleGetMsg()"
              >
                获取验证码
              </a-spin>
              <a-spin :spinning="msg.loading" v-else slot="addonAfter" class="cursor"> 重新获取 {{ msg.time }} 秒 </a-spin>
            </a-input>
          </a-form-item>
        </a-form>
      </div>
      <div v-else>
        <a-form :form="form1" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 20 } }">
          <a-form-item label="新手机号码">
            <a-input v-decorator="['phone', { rules: [{ required: true, message: '新手机号码不能为空' }] }]" />
          </a-form-item>
          <a-form-item label="验证码">
          <a-input v-decorator="['phoneCode', { rules: [{ required: true, message: '验证码不能为空' }] }]">
              <a-spin
                v-if="newMsg.time === 0"
                slot="addonAfter"
                :spinning="newMsg.loading"
                class="cursor"
                @click="handleGetnewMsg()"
              >
                获取验证码
              </a-spin>
              <a-spin :spinning="newMsg.loading" v-else slot="addonAfter" class="cursor"> 重新获取 {{ newMsg.time }} 秒 </a-spin>
            </a-input>
            </a-form-item>
        </a-form>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { invoiceListByNoAuth } from '@/api/noAuth'
import { userGetPhoneCode, userCheckPhoneCode, userGetPhoneCodeByNew } from '@/api/login'
// 子公司列表   // 外包列表     // 工作室列表 // 客户列表
// 表单字段
const fields = ['id', 'name', 'bankName', 'bankNum', 'number', 'address', 'phone', 'type'] //,
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      current: 0,
      msg: {
        time: 0,
        loading: false,
        interval: null,
      },
      codeToken:null,
      newMsg: {
        time: 0,
        loading: false,
        interval: null,
      },
    }
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))
  },
  methods: {
    handleOk() {
      if (this.current == 0) {
        this.form.validateFields((errors, values) => {
          this.confirmLoading = true
          if (!errors) {
            userCheckPhoneCode(values)
            .then((res) => {
              this.current = 1
              this.codeToken = res.data.codeToken
              this.confirmLoading = false
            })
            .catch((err) => {
              this.$message.error('操作失败!')
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      }else{
        this.$emit("ok");
      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleGetMsg() {
      userGetPhoneCode({ phone: this.userInfo.phone }).then((res) => {
        this.startInterval(this.msg)
      })
    },
    handleGetnewMsg(){
      this.form1.validateFields(['phone'],(errors, values)=>{
        if(!errors){
          values.codeToken = this.codeToken
          userGetPhoneCodeByNew(values).then((res) => {
            this.startInterval(this.newMsg)
          })
        }
      })
    },
    // 获取验证码
    /**
     * @param { time, interval, loading } a_data
     * time // 重新获取时间
     * interval // 重新获取计时器
     * loading  // 获取验证码
     */
    startInterval(a_data) {
      a_data.loading = false
      a_data.time = 60
      a_data.interval = setInterval(() => {
        a_data.time--
        if (a_data.time <= 0) {
          a_data.time = 0
          clearInterval(a_data.interval)
          a_data.interval = null
        }
      }, 1000 * 1)
    },
  },

  watch: {
    visible: function (n, o) {
      if (n) {
        this.form.setFieldsValue({
          phone: this.userInfo ? this.userInfo.phone : '',
        })
      } else {
        this.current = 0;
        this.form.resetFields()
        this.form1.resetFields()
      }
    },
  },
}
</script>
<style>
.cursor{
  cursor: pointer;
}
</style>
